In CSS, :before and ::before both target the same pseudo-element that allows content to be inserted before an element's actual content. The difference lies in the CSS specification: CSS3 introduced the double colon :: notation to clearly distinguish pseudo-elements from pseudo-classes, while : single colon syntax is retained for backward compatibility with older browsers.

Key Points

1
:before (single colon) is the legacy syntax from CSS2, still supported for backward compatibility.
2
::before (double colon) is the modern CSS3 syntax, recommended for clarity and standards compliance.
3
The double colon distinguishes pseudo-elements from pseudo-classes like :hover or :first-child.
4
Functionally, both :before and ::before behave the same way in modern browsers.

Example: Using ::before

In this example, the star is added before the paragraph text using ::before. Using :before would achieve the same visual result, but ::before is the recommended CSS3 syntax.

Best Practices

1
Prefer using ::before and ::after for clarity and compliance with CSS3 standards.
2
Use the content property to define what is inserted.
3
Test for backward compatibility if supporting older browsers that recognize only :before or :after.
4
Use pseudo-elements for decorative or structural styling without altering HTML content.

Difficulty: 3/10

Topics: CSS pseudo-elements, selector syntax evolution, browser compatibility

Scenario Questions

0-2 years experience

1
You're trying to add a decorative icon before a button using :before, but it's not showing up — what’s the most likely reason and how would you fix it?
2
Your teammate used :before in the CSS, but the design system docs say to use ::before. Should you change it? Why or why not?
3
If you write div::before { content: '★'; } and it doesn’t render, what three things would you check first?

2-5 years experience

1
A feature using :before for tooltips broke after a CSS minifier update — the content property vanished. What’s going on, and how do you debug it?
2
Your team’s CSS linter is flagging :before as outdated. Should you refactor all instances? What risks do you consider before doing so?
3
You inherited a codebase with both :before and ::before used randomly. How do you decide whether to standardize, and what’s your migration plan?

5-8 years experience

1
You’re optimizing a high-traffic page where pseudo-elements are used heavily for UI decorations — does using :before vs ::before impact rendering performance or bundle size? How would you validate that?
2
Your component library supports legacy browsers. How do you balance modern syntax (::before) with IE11 compatibility without bloating CSS or creating maintenance debt?
3
A third-party CSS framework uses :before internally, but your team enforces ::before. How do you handle the inconsistency without forking the library or violating accessibility?

8+ years experience

1
You’re leading a company-wide CSS migration to modern standards. How do you prioritize refactoring pseudo-element syntax across hundreds of legacy components without breaking production?
2
Your organization is adopting a design system with strict CSS rules. How do you architect the linting, tooling, and documentation to enforce ::before universally while managing legacy tech debt across multiple product teams?
3
A major browser is planning to deprecate single-colon pseudo-element syntax. How do you prepare your organization’s CSS architecture for this change, and what metrics would you track to measure readiness?

Follow-up Questions

❓What happens if you use ::before in an older browser like IE8?
❓Why did the CSS spec make this change in the first place?
❓How would you enforce consistent syntax in a large codebase?